<template>
    <div class="scenery">
    <div class="biaotibox">
        <h2 class="hh2"></h2>
        <h2 class="hh3">校园风光</h2>
    </div>
    <div class="imgbox" >
        <a v-for="(item,index) in itemr2" :key="item.index" @click="goschool(item.schoolName,item.schoolCode)" class="atupian"  v-show="index<indexImg" v-if="(showSchoolImg(index))">
            <div class="frame" >
                <img  :src="item.url" alt="" class="yimg  yimgphone" >
                <span class="wenzijieshao">{{ item.schoolName }}</span>
            </div>
        </a>
    </div>
    </div>

</template>
<style scoped>
    .scenery{
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }

    .gongneng{
        margin-bottom: 300px;
    }
    .gjbox{
        margin-bottom: 120px;
    }
        /* .biaotibox{
        height: 5%;
        width: 100%;
    }
    .imgbox{
        height: 95%;
        width: 100%;
        padding-left: 2.5%;
        padding-right: 2.5%;
        margin-left: 0px;
        
    }
    .atupian{
        width: 20%;
        height: 50%;
    }
    .wenzijieshao{
        width: 95%;
        height: 20%;
    } */
</style>
<script >
    import resizeobserver from "caniuse-lite/data/features/resizeobserver";
import tool from "../tool/tool";
export default {
data() {
return {
itemr1: [],
itemr2: [],
indexImg:10

}
},
methods: {
    showSchoolImg:function(index){
      if(this.screenWith<1000){
        if(this.screenWith<1000&&index==5){
          return true
        }
        else if((this.screenWith>750&&this.screenWith<1000)&&(index==1||index==2)){
          return true
        }
      }
      else{
        return true
      }
    },
index2: function () {
tool.$request("GET",'/CampusScenery/HomeCsp').then(res=>{
    
    this.itemr2 = res;
})
},
showImg(){
    var width = tool.$getWindowWidth()
    if(width>800&&width<1200){
        this.indexImg=8
    }
    else if(width>600&&width<800){
        this.indexImg=6
    }else if(width<600){
        this.indexImg=4
    }

},
goschool(schoolName,schoolCode){
      // params
      console.log(schoolCode)
    //   alert(schoolCode)
      this.$router.push({
        path:'/schoolinfo',
        name:'schoolinfo',
        params:{
            ids:schoolCode,
        name:schoolName
        }
      })
    }
},
mounted() {
    this.yangshi();
    window.onresize = () => {
      this.yangshi();
      this.showImg();
    }
  },
created(){
    this.index2();
    this.showImg()
}
}
</script>
